<template>
  <div class="gift">

    <app-head title="礼包" :noneBack="true" v-if="false"></app-head>

    <Tab :items="tabItems" :active="tabActive" @change="tabChange"/>

    <scroll :data="giftList" action="getGiftList" :params="giftParams">
      <GiftList slot="scrollInner" :content="giftList.list"/>
    </scroll>

    <TabBar/>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapGetters } from 'vuex'
import Tab from '@/components/tab/Index'
import TabBar from '@/components/tab/Bar'
import Scroll from '@/components/common/Scroll'
import GiftList from '@/components/gift/List'
import api from '@/api'

export default {
  name: 'gift',
  components: {
    Tab,
    TabBar,
    Scroll,
    GiftList
  },
  computed: {
    ...mapGetters([
      'appGiftList',
      'h5GiftList'
    ]),

    giftList () {
      return this.tabActive ? this.h5GiftList : this.appGiftList
    },

    giftParams () {
      return this.tabActive ? {} : {
        is_app: 1
      }
    }
  },
  data () {
    return {
      tabActive: 0,
      tabItems: ['APP礼包', 'H5礼包']
    }
  },
  methods: {
    tabChange (index) {
      this.tabActive = index
    }
  },
  created () {
    this.$store.dispatch('getGiftList', {
      is_app: 1
    })
    this.$store.dispatch('getGiftList')
  }
}
</script>

<style scoped lang="scss">
.gift {
  padding-bottom: 0.51rem;
}
</style>
